<!--
 * @description: 循环table
 * @Author: Islands
 * @Date: 2024-03-27 01:41:54
 * @LastEditTime: 2024-03-28 19:26:54
-->
<script lang="ts" setup>
import { ref, reactive, defineProps } from "vue";
import { Edit, Delete, List } from "@element-plus/icons-vue";
defineProps<{
  tableData: Array<any>;
  editEvent: (id: any) => void;
  detailsEvent: (id: any) => void;
}>();
</script>
<template>
  <div class="table" style="width: 100%">
    <el-table :data="tableData" stripe>
      <slot />
      <el-table-column :label="$t(`table.updatedTime`)" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px"></span>
          </div>
        </template>
      </el-table-column>
      <!-- 操作按钮 -->
      <el-table-column align="center" :label="$t(`table.operation`)">
        <template #default="scope">
          <div class="btn">
            <el-button link :icon="List" @click="detailsEvent(scope.row.id)">
              {{ $t(`button.details`) }}
            </el-button>
            <el-button
              type="primary"
              link
              :icon="Edit"
              @click="editEvent(scope.row.id)"
            >
              {{ $t(`button.edit`) }}
            </el-button>
            <el-popconfirm :title="$t(`message.popconfirm.title`)">
              <template #reference>
                <el-button type="danger" link :icon="Delete">
                  {{ $t(`button.delete`) }}
                </el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="scss" scoped>
.btn {
  display: flex;
  justify-content: center;
}
</style>
